@charset 'UTF-8';
@import './common.scss';
@import '../fonts/iconfont.css';

*{
    margin: 0;
    padding: 0;
    text-decoration: none;
    list-style: none;
}

.web{
	header{
		position: absolute;
		width: 100vw;
		top: 0;
		left: 0;
		background-color: #FFFFFF;
		.box{
			width: 93vw;
			height: 7.5vw;
			margin: 6vw auto;
			display: flex;
			justify-content: space-between;
			.leftBox{
				button{
					width: 23vw;
					font-size: 4.5vw;
					font-weight: normal;
					font-stretch: normal;
					line-height: 6vw;
					letter-spacing: 0vw;
					color: #000000;
					border-radius: 10vw;
					border: 1px solid #FF9344;
					padding: 1.5vw 3.3vw;
					background-color: #FFFFFF;
				}
			}
			.centerBox{
				transform: translateX(-10%);
				span{
					font-size: 4vw;
					font-weight: normal;
					font-stretch: normal;
					line-height: 11vw;
					letter-spacing: 0vw;
					color: #000000;
					
				}
			}
			.rightBox{
				padding-top: 1vw;
				i{
					color: #FF9344;
					font-size: 8vw;
					
				}
			}
		}
	}
	main{
		position: absolute;
		width: 100vw;
		top: 18.5vw;
		bottom: 18vw;
		
		// 超出部分滚动条
		overflow: auto;
		
		.loginBox{
			width: 94vw;
			margin: 0 auto;
			display: flex;
			justify-content: space-between;
			align-items: center;
			.left{
				display: flex;
				justify-content: space-between;
				width: 47vw;
				align-items: center;
				.imgBox{
					width: 23vw;
					height: 23vw;
					overflow: hidden;
					img{
						width: 100%;
					}
				}
				.login{
					button{
						border: none;
						background-color: #FFFFFF;
						font-size: 4vw;
						font-weight: normal;
						font-stretch: normal;
						line-height: 5vw;
						letter-spacing: 0vw;
						color: #000000;
					}
					h3{
						font-size: 3vw;
						font-weight: normal;
						font-stretch: normal;
						line-height: 7vw;
						letter-spacing: 0vw;
						color: #9d9d9d;
						margin-top: 3vw;
					}
				}
			}
			.right{
				font-size: 5vw;
			}
		}
		
		.myself{
			width: 94vw;
			margin: 0 auto;
			display: flex;
			justify-content: space-between;
			margin-top: 2.5vw;
			.myselfBox{
				width: 26vw;
				height: 20vw;
				text-align: center;
				padding-top: 3.5vw;
				i{
					font-size: 11vw;
					color: #FFFFFF;
				}
				p{
					font-size: 3vw;
					font-weight: normal;
					font-stretch: normal;
					line-height: 3vw;
					letter-spacing: 0vw;
					color: #000000;
					margin-top: 2vw;
				}
			}
			.myselfBox:nth-child(1){
				background-color: #b2e0a0;
			}
			.myselfBox:nth-child(2){
				background-color: #a0dce0;
			}
			.myselfBox:nth-child(3){
				background-color: #e0b7a0;
			}
		}
		
		.function{
			width: 94vw;
			margin: 0 auto;
			margin-top: 2vw;
			.functionTop{
				width: 94vw;
				height: 45vw;
				display: flex;
				justify-content: space-between;
				flex-direction: column;
				.rowBox{
					display: flex;
					justify-content: space-between;
					align-items: center;
					.left{
						display: flex;
						justify-content: space-between;
						align-items: center;
						width: 27vw;
						i{
							font-size: 8vw;
							color: #ff9344;
						}
						h2{
							font-size: 3vw;
							font-weight: normal;
							font-stretch: normal;
							line-height: 6vw;
							letter-spacing: 0vw;
							color: #000000;
						}
					}
					.right{
						display: flex;
						justify-content: space-between;
						align-items: center;
						width: 11vw;
						h2{
							font-size: 3vw;
							font-weight: normal;
							font-stretch: normal;
							line-height: 7vw;
							letter-spacing: 0vw;
							color: #000000;
						}
						i{
							font-size: 3vw;
							color: #FF9344;
						}
					}
				}
				.rowBox:nth-child(1){
					
				}
				.rowBox:nth-child(2){
					.left{
						width: 23vw;
					}
				}
				.rowBox:nth-child(3){
					.left{
						width: 23vw;
						i{
							color: #b2e0a0;
						}
					}
				}
				.rowBox:nth-child(4){
					.left{
						i{
							color: #9cdadf;
						}
					}
				}
				
				
			}
			.functionBottom{
				margin-top: 7vw;
				display: flex;
				justify-content: space-between;
				flex-direction: column;
				height: 21vw;
				.rowBox{
					display: flex;
					justify-content: space-between;
					align-items: center;
					.left{
						display: flex;
						justify-content: space-between;
						align-items: center;
						width: 20.3vw;
						i{
							font-size: 10vw;
							color: #ff9344;
						}
						h2{
							font-size: 3vw;
							font-weight: normal;
							font-stretch: normal;
							line-height: 6vw;
							letter-spacing: 0vw;
							color: #000000;
						}
					}
					.right{
						display: flex;
						justify-content: space-between;
						align-items: center;
						width: 11vw;
						h2{
							font-size: 3vw;
							font-weight: normal;
							font-stretch: normal;
							line-height: 7vw;
							letter-spacing: 0vw;
							color: #000000;
						}
						i{
							font-size: 3vw;
							color: #FF9344;
						}
					}
				}
			}
		}
		
		.cancel{
			width: 66vw;
			margin: 0 auto;
			display: flex;
			justify-content: space-between;
			margin-top: 4vw;
			.btnBox{
				button{
					display: block;
					width: 20vw;
					height: 10vw;
					border-radius: 10vw;
					background-color: #FF9344;
					border: none;
					font-size: 3vw;
					font-weight: normal;
					font-stretch: normal;
					line-height: 6vw;
					letter-spacing: 0vw;
					color: #ffffff;
				}
			}
		}
	}
}

@media screen and (min-width:768px) and (max-width:1024px) {
	.web{
		main{
			.function{
				.functionTop{
					.rowBox{
						.left{
							h2{
								font-size: 3.6vw;
							}
						}
						.right{
							h2{
								font-size: 3.6vw;
							}
							i{
								font-size: 3.6vw;
							}
						}
					}
				}
				
				.functionBottom{
					.rowBox{
						.left{
							h2{
								font-size: 3.6vw;
							}
						}
						.right{
							h2{
								font-size: 3.6vw;
							}
							i{
								font-size: 3.6vw;
							}
						}
					}
				}
			}
			
			.cancel{
				.btnBox{
					button{
						font-size: 3.6vw;
					}
				}
			}
		}
	}
}